<script setup lang="ts">
import { Form, message } from 'ant-design-vue';
import { MailOutlined, MobileOutlined } from '@ant-design/icons-vue';
import { reactive } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { remove as removeCookie, set as setCookie } from 'es-cookie';
import { login as loginUser } from '@/api/index.ts';
import { useLoginStore } from '@/store';
import { SEND_COUNT } from '@/const';
import { redirect } from '@/tools/login-redirect';
import Icp from '@/components/icp/index.vue';

removeCookie('token');

const LOGIN_FORM_RULES: Record<string, Rule[]> = reactive({
  phone: [
    {
      required: true,
      message: '请输入手机号',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
    },
  ],
  validateCode: [
    {
      required: true,
      message: '请输入验证码',
    },
  ],
});

const setUserInfo = useLoginStore().setUserInfo;

const formState = reactive({
  phone: '',
  validateCode: '',
});

const useForm = Form.useForm;

const { validate, validateInfos } = useForm(formState, LOGIN_FORM_RULES);
const loginState = reactive({
  time: SEND_COUNT,
  sendBtnDisabled: false,
  loginBtnDisabled: false,
  loginBtnLoading: false,
});

function login() {
  validate().then((res) => {
    loginState.loginBtnLoading = true;
    loginUser({
      phone: res.phone,
    }).then((res) => {
      message.success('登录成功');
      setUserInfo(res.Data);
      setCookie('token', res.Data.Nickname);
      setTimeout(() => {
        redirect();
      }, 100);
    }).finally(() => {
      loginState.sendBtnDisabled = false;
      loginState.loginBtnLoading = false;
    });
  });
}

function getValidateCode() {
  loginState.sendBtnDisabled = true;
  const interval = setInterval(() => {
    if (loginState.time-- <= 0) {
      loginState.time = SEND_COUNT;
      loginState.sendBtnDisabled = false;
      clearInterval(interval);
    }
  }, 1000);
}
</script>

<template>
  <div class="login-page relative flex flex-items-center flex-justify-center h-[100%]">
    <div class="w480">
      <h1 class="text-center">
        登录
      </h1>
      <a-form>
        <a-form-item v-bind="validateInfos.phone">
          <a-input v-model:value="formState.phone" size="large" placeholder="手机号码">
            <template #prefix>
              <MobileOutlined />
            </template>
          </a-input>
        </a-form-item>
        <a-row :gutter="10">
          <a-col span="18">
            <a-form-item v-bind="validateInfos.validateCode">
              <a-input v-model:value="formState.validateCode" size="large" placeholder="验证码">
                <template #prefix>
                  <MailOutlined />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col span="6">
            <a-button size="large" :disabled="loginState.sendBtnDisabled" block @click="getValidateCode">
              {{ loginState.sendBtnDisabled ? `${loginState.time}秒后重发` : '获取验证码' }}
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-button
        class="mt24" size="large" :loading="loginState.loginBtnLoading" block type="primary"
        @click.prevent="login"
      >
        登录
      </a-button>
    </div>
    <div class="absolute bottom-0 w-[100%]">
      <Icp />
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-page {
	background: url('@/assets/bg.svg') no-repeat 50%;
	background-size: 100%;
}
</style>
